<template>
  <div class="table-box">
    <ProTable ref="proTable" row-key="id" :columns="columns" :request-api="getFoodTagLst" :init-param="initParam">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="openDrawer('新增', { type: reason.type })">
          新增
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button v-auth="'edit'" type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)"> 编辑 </el-button>
        <el-button v-auth="'delete'" type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <NotesDialog ref="notesDialogRef" />
  </div>
</template>

<script setup lang="tsx" name="changePrice">
import { ref, reactive, toRefs } from "vue";
import { Goods } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import NotesDialog from "@/views/goods/components/NotesDialog.vue";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { getFoodTagLst, createFoodTagLst, editFoodTagLst, deleteFoodTagLst } from "@/api/modules/goods";
import { commentType } from "@/utils/serviceDict";

const proTable = ref<ProTableInstance>();
const props = defineProps({
  reason: {
    type: Object
  }
});
const { reason } = toRefs(props);
const initParam = reactive({ type: reason.value!.type });
// 表格配置项
const columns: ColumnProps<Goods.ResFoodTagLst>[] = [
  { type: "index", label: "序号", width: 60 },
  { sortable: true, prop: "type", label: "类型", enum: commentType, align: "left" },
  { sortable: true, prop: "content", label: "备注", align: "left" },
  { prop: "operation", label: "操作", width: 160, fixed: "right" }
];

// 删除
const deleteAccount = async (params: Goods.ResFoodTagLst) => {
  await useHandleData(deleteFoodTagLst, { type: reason.value!.type, id: params.id }, `删除【${params.content}】备注项`);
  proTable.value?.getTableList();
};

// 打开 dialog(新增、查看、编辑)
const notesDialogRef = ref<InstanceType<typeof NotesDialog> | null>(null);
const openDrawer = (title: string, row: Partial<Goods.ResFoodTagLst> = {}) => {
  const params = {
    title: title + reason.value!.title,
    row: { ...row },
    isView: false,
    type: reason.value!.type,
    api: title === "新增" ? createFoodTagLst : title === "编辑" ? editFoodTagLst : undefined,
    getTableList: proTable.value?.getTableList
  };
  notesDialogRef.value?.acceptParams(params);
};
</script>
